﻿var React = require('react');
var update = require('react-addons-update');

var Profileform = React.createClass({

    handleChange: function (e) {
        var newstate = update(this.state, { data: { [e.target.name]: { $apply: function (x) { return e.target.value; } } } });
        this.setState(newstate);
    },
    handleProvinceChange: function (e) {
        var newstate = update(this.state, {
            data: {
                Province: { $set: e.target.value },
                City: { $set: "" }
            }
        });
        this.setState(newstate);

    },
    handleSexChange: function (e) {
        if (e.target.name == "Genderm") {
            if (e.target.value) {
                var newstate = update(this.state, { data: { sex: { $set: 1 } } });
                this.setState(newstate);
            }
        }

        if (e.target.name == "Genderf") {
            if (e.target.value) {
                var newstate = update(this.state, { data: { sex: { $set: 2 } } });
                this.setState(newstate);
            }
        }
    },
    handleSubmit: function (e) {
        e.preventDefault();
        this.props.onCommentSubmit({ area: this.state.Province + "|" + this.state.City, dycardno: this.state.dycardno, cellno: this.state.cellno, email: this.state.email, sex: this.state.sex, glsr: this.state.month + "|" + this.state.day, nld: this.state.nld, nldsm: this.refs.year.text });
        return;
    },
    Checkemail: function (e) {
        var email = document.getElementById("email");

        if (email.validity.patternMismatch == true)
            email.setCustomValidity("邮箱不正确！");
        else
            email.setCustomValidity("");
    },
    getInitialState: function () {
        return { data: this.props.data };
    },
    componentWillReceiveProps: function (nextProps) {
        this.setState({ data: nextProps.data });
    },
    render() {
        return (
            <form className="form-horizontal" onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label htmlFor="cardno" className="col-xs-3 control-label"><span className="redstar">*</span>卡号: </label>
                    <div className="col-xs-9">
                        <input type="text" className="form-control" id="cardno" value={this.state.data.cardno} required="required" placeholder="卡号" ref="cardno" />
                    </div>
                </div>
                <div className="form-group">
                    <label htmlFor="phone" className="col-xs-3 control-label"><span className="redstar">*</span>手机: </label>
                    <div className="col-xs-9">
                        <input name="cellno"  type="text" className="form-control"  value={this.state.data.cellno}  onChange={this.handleChange} id="phone" disabled="disabled" placeholder="手机" ref="phone" />
                    </div>
                </div>
                <div className="form-group">
                    <label htmlFor="reion" className="col-xs-3 control-label"><span className="redstar">*</span>所在地: </label>
                    <div id="city_1" className="col-xs-9">
                        <div className="container-fluid">
                            <div className="row">
                                <div className="col-xs-5">
                                    <select id="SelProvince" name="Province"  onChange={this.handleProvinceChange} required="required" ref="Province" className="form-control" value={this.state.data.Province}>
                                    </select>
                                </div>
                                <div className="col-xs-5">
                                    <select id="SelCity" required="required"  ref="City"  onChange={this.handleChange} className="form-control"  name="City" value={this.state.data.City}>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="form-group">
                    <label htmlFor="email" className="col-xs-3 control-label">E-MAIL: </label>
                    <div className="col-xs-9">
                        <input type="text" className="form-control" onInput={this.Checkemail}  onChange={this.handleChange}
                            pattern="^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$" id="email" placeholder="邮箱" ref="email" name="email" value={this.state.data.email}/>
                    </div>
                </div>
                <div className="form-group">
                    <label htmlFor="Gender" className="col-xs-3 control-label">性别: </label>
                    <div className="col-xs-9">
                        <label className="radio-inline">
                            <input type="radio" name="Gender" id="Gender1" ref="Genderm" name="Genderm"  onChange={this.handleSexChange} checked={this.state.data.sex == 1}/> 男
                        </label>
                        <label className="radio-inline">
                            <input type="radio" name="Gender" id="Gender2" ref="Genderf"  name="Genderf" onChange={this.handleSexChange} checked={this.state.data.sex == 2}/> 女
                        </label>
                    </div>
                </div>
                <div className="form-group">
                    <label htmlFor="email" className="col-xs-3 control-label">我的生日: </label>
                    <div className="col-xs-9">
                        <div className="container-fluid">
                            <div className="row">
                                <div className="col-xs-4"> <select id="sel_month" className="form-control" ref="month" name="month"  onChange={this.handleChange} value={this.state.data.month}></select></div>
                                <div className="col-xs-4"><select id="sel_day" className="form-control" ref="day" name="day"  onChange={this.handleChange} value={this.state.data.day}></select></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="form-group">
                    <label htmlFor="email" className="col-xs-3 control-label">年龄段: </label>
                    <div className="col-xs-9">
                        <select id="yearrange" className="form-control" ref="year" name="nld"  onChange={this.handleChange} value={this.state.data.nld} >
                            <option value="0">年</option>
                            <option value="1">0-10年</option>
                            <option value="2">10-20年</option>
                            <option value="3">20-30年</option>
                            <option value="4">30-40年</option>
                            <option value="5">40-50年</option>
                        </select>
                    </div>
                </div>
                <input id="cardno" type="hidden"  ref="cardno"/>
                <button type="submit" id="submitbnt" value="Post" className="btn btn-success btn-lg btn-block">提交</button>

            </form>

        );
    },
});

module.exports = Profileform;



module.exports = BindOldCard;